<template>
    <div>
        <el-container class="content">
            <el-header>
                <div class="header-text">
                    编辑广告位
                </div>
                <div>
                    <el-button link type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
                    <el-button link type="primary" @click="resetForm(formRef)">返回</el-button>
                </div>
            </el-header>
            <el-main>
                <el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="所属平台" prop="platform">
                                <el-select v-model="form.platform" placeholder="请选择所属平台" size="large" clearable>
                                    <el-option v-for="item in platforms" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="广告位名称" prop="name">
                                <el-input v-model="form.name" size="large" clearable/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="调用名称" prop="call_name">
                                <el-input v-model="form.call_name" size="large" clearable/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-alert title="自定义广告位调用名不可以以“QS_”开头" type="info" show-icon :closable="false" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="数量" prop="num">
                                <el-input v-model.number="form.num" size="large" clearable/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="建议宽度" prop="width">
                                <el-input v-model.number="form.width" size="large" clearable/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="建议高度" prop="height">
                                <el-input v-model.number="form.height" size="large" clearable/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item>
                                <el-button type="primary" size="large" @click="submitForm(ruleFormRef)">保存</el-button>
                                <el-button size="large" @click="resetForm(formRef)">返回</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
const { reactive, ref,getCurrentInstance, onMounted} = require("vue-demi");
const {proxy} = getCurrentInstance() 

// 初始化
onMounted(async ()=>{
    const id = proxy.$route.query.id
    let data = await proxy.$API.platformspace.platformSpace.get({id:id})
    form.platform = Number(data[0].platform) ;
    form.name = data[0].name;
    form.call_name = data[0].call_name;
    form.num = data[0].num;
    form.height = data[0].height;
    form.width = data[0].width;
    form.id = data[0].id
})
const ruleFormRef = ref()
const form = reactive({
    platform: undefined,
    name: "",
    call_name: '',
    num: "",
    height: "",
    width: "",
    id:''
})
// 广告播放平台
const platforms = ref([
    { value: 1, label: 'APP' },
    { value: 2, label: '触屏端' },
    { value: 3, label: '微信小程序' },
    { value: 4, label: 'pc端' },
])

// 非空判断
const rules = reactive({
    platform: [{ required: true, message: '请选择所属平台', trigger: 'blur' }],
    name:[{ required: true, message: '请输入广告位名称', trigger: 'blur' }],
    call_name:[
    { required: true, message: '请输入调用名称', trigger: 'blur' }
        ],
    num:[
        { required: true, message: '请输入数量', trigger: 'blur' },
        { type: 'number', message: '请输入数字' },],
    height:[
        { required: true, message: '请输入建议高度', trigger: 'blur' },
        { type: 'number', message: '请输入数字' }],
    width:[
        { required: true, message: '请输入建议宽度', trigger: 'blur' },
        { type: 'number', message: '请输入数字' }]
})
// 表单提交
const submitForm = async (formEl)=>{
    await formEl.validate(async (valid) => {
    if (valid) {
        await proxy.$API.platformspace.editplatformSpace.put(form)
        proxy.$message.success('修改成功')
        resetForm()
    }
  })
}
const resetForm = ()=>{
    proxy.$router.back()
}
</script>

<style lang="less" scoped>
.content {
    margin: 10px;

    .header-text {
        font-size: 18px;
    }

    .el-main {
        background-color: #fff;
    }
}

.el-alert {
    background-color: #fff;

    ::v-deep .el-alert__title {

        font-size: 16px !important;
    }
}

.el-form {
    .el-select {
        width: 100%;
    }
    ::v-deep .el-form-item__label{
        font-size: 16px !important;
        font-weight: bold;
    }
}
</style>